<template>
  <div>
    <el-form
      ref="feedback"
      :model="feedback"
      label-width="80px"
      style="width: 60%; margin-top: 30px"
    >
      <el-form-item label="反馈内容">
        <el-input v-model="feedback.content"></el-input>
      </el-form-item>
      <el-form-item label="反馈图片">
       <el-upload 
                 :show-file-list="false"
                 :on-success="handleHotelPicSuccess"
                 :before-upload="beforeHotelPicUpload"
                  class="hotel-uploader"
                  action="http://localhost:8080/jiapei/feedback/upload?module=hotel"> 
                  <img v-if="feedback.img" :src="feedback.img">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <router-link to="/setting/feedback" style="margin-left: 20px">
          <el-button>取消</el-button>
        </router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
    feedback:{
        content:'',
        cusId:'',
        img:'',
        mobile:'',
    },
    rous:{
        id:'',
        mobile:''
    },
    hotel: {
         hotelName:'',
         hotelLevel:3,
         address:'',
         details:'',
         hotelpic:''
      }   
    };
    
    },
    methods: {
        onSubmit() {
        this.$axios
            .post("http://localhost:8080/jiapei/feedback/addback", this.feedback)
            .then((res) => {
            console.log(res);
            this.$router.push("/orders");
            });
    },
    submitUpload() {
        this.$axios({
        method: "GET",
        url: "http://localhost:8080/jiapei/feedback/selert",
        params: {
          mobile: this.feedback.mobile,
        },
      }).then((res) => {
        console.log(res)
        this.rous=res.data.data.records[0];
        this.feedback.cusId=this.rous.id;
        this.feedback.mobile=this.rous.mobile;
        console.log(this.feedback)
      });
  },
  handleHotelPicSuccess:function(res,file){
        this.feedback.img=res.data.url;
        // 强制重新渲染
        this.$forceUpdate()
      },
      beforeHotelPicUpload:function(file){
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
             this.$message.error('上传图片只能是 JPG 格式!')
        }
        if(!isLt2M){
             this.$message.error('上传图片大小不能超过2MB!')
        }
        return isJPG&&isLt2M;   

      }
    },
    created() {
        this.feedback.mobile = this.$store.getters.name;
        this.submitUpload();
      }
}
</script>

<style>
.hotel-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .hotel-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .hotel-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .hotel-uploader img {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
